<template>
    <div>
        <h2>商品分类</h2>
        <el-card shadow="never" style="margin-bottom: 14px;" :body-style="{ paddingBottom: '2px' }">
            <!-- 搜索部分 -->
            <el-form :inline="true" class="demo-form-inline" :model="searchData">
                <el-form-item label="商品分类">
                    <el-select v-model="searchData._id" @change="serchType" clearable style="width: 250px;">
                        <el-option v-for="item in allClassFy" :key="item._id" :label="item.name"
                            :value="item._id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="分类状态">
                    <el-select style="width: 250px;" v-model="searchData.state">
                        <el-option label="显示" :value="1"></el-option>
                        <el-option label="隐藏" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类名称">
                    <el-input style="width: 250px;" v-model="searchData.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card shadow="never">
            <div style="margin-bottom: 14px;">
                <el-button type="primary" @click="dialogVisible = true">添加分类</el-button>
            </div>
            <!-- 表格渲染 -->
            <BaseTable 
            :data="tableData.rows" 
            :total="tableData.total" 
            :checkbox="checkbox"
            v-model="pageData" :columns="columns">
                <template #icon="{ row }">
                    <el-avatar shape="circle" :size="100" fit="cover" :src="row.icon" />
                </template>
                <template #state="{ row }">
                    <el-switch v-model="row.state" active-text="开启" inactive-text="关闭" inline-prompt :active-value="1"
                        :inactive-value="0"></el-switch>
                </template>
                <template #action="{ row }">
                    <el-button type="primary" text @click="updateGoddsFile(row)">修改</el-button>
                    <el-button type="primary" text @click="SureDeleteBefore(row)">删除</el-button>
                </template>
            </BaseTable>
            <!-- 弹出框 -->
            <GoodsClassifyDia2 @getClassifyData="getClassifyData" 
            v-model="dialogVisible" :ruleForm="ruleForm" />
        </el-card>

    </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import api from '../../../api';
import { onMounted, reactive, ref, watch } from 'vue';
import { ClassifiesItem, SeachParams } from '../../../api/modules/goodsClassifies';

let tableData = reactive({
    rows: [],
    total: 0
})
const ruleForm = ref({})
// 分页数据
const pageData = ref<PageQuery>({
    currentPage: 1,
    pageSize: 5
})
// console.log(row,22);

// 收索全部数据
const allClassFy = ref<ClassifiesItem[]>([])
const searchData = ref<SeachParams>({})
// 表格列配置
const columns = [
    {
        label: '商品ID',
        prop: '_id'
    },
    {
        label: '分类图标',
        prop: 'icon'
    },
    {
        label: '分类名称',
        prop: 'name'
    },
    {
        label: '排序',
        prop: 'sort'
    },
    {
        label: '状态',
        prop: 'state'
    },
    {
        label: '操作',
        prop: 'action'
    }
]
// 一个类型的状态数据
// 弹窗开关
let dialogVisible = ref(false)
onMounted(() => {
    getClassifyData();
    getAllClassFy()
})
const checkbox=ref(false)
// 获取所有分类
const getClassifyData = () => {
    api.goodsClassifies.search({
        ...searchData.value,
        ...pageData.value
    })
        .then(res => {
            console.log(res);
            if (res.code == 200) {
                tableData.rows = res.data.rows
                tableData.total = res.data.total;
            }
        })
}
// 删除前确认删除
const SureDeleteBefore = (row: ClassifiesItem) => {
    ElMessageBox.confirm(
        '您确认删除吗?',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        console.log(row);
        handleDelete(row)

        // ElMessage.success("配送员删除成功")
    })
}
// 删除商品类型
const handleDelete = async (row: ClassifiesItem) => {
    // console.log( row,3333)
    const res = await api.goodsClassifies.remove({ _id: row._id })
    if (res.code == 200) {
        console.log(res);
        getClassifyData()
        ElMessage.success("商品分类删除成功")
    }else{
        ElMessage.error(res.message)
    }
}
// 修改商品分类
const updateGoddsFile = (data: ClassifiesItem) => {
    console.log(data);
    ruleForm.value = { ...data }
    dialogVisible.value = true
}
//输入框清空
watch(dialogVisible, () => {
    if (dialogVisible.value == false) {
        // console.log("gggg");
        ruleForm.value = {
            _id: "",
            name: "",
            parentId: 0,
            sort: 0,
            state: 1,
        }
    }
},
)
// 分页条数据变化
watch(pageData, () => {
    getClassifyData();
}, {
    deep: true
})
// 按类型搜索
const serchType = () => {
    console.log("hhhh");
}
const onSubmit = () => {
    // console.log(33);
    getClassifyData()
}
// 获取所有分类类型
const getAllClassFy = () => {
    api.goodsClassifies.search()
        .then(res => {
            // console.log(res);
            if (res.code == 200) {
                allClassFy.value = res.data.rows
            }
        })
}
watch([searchData, pageData], () => {
    getClassifyData()
},
    { deep: true }
)
</script>
<style scoped></style>